import React, {Component} from 'react';
import {Link, NavLink} from 'react-router-dom';
import logout from '../api'
export default class PageA extends React.Component {
  constructor() {
    super();
    this.url = '/pageb'
  }
  jump(url) {
    // 逻辑判断
    // 普通的跳转，新增一条历史记录
    this.props.history.push(url)
    // 替换url，不会新增历史记录
    // this.props.history.replace(url)
    // 正数表示前进，负数表示后退
    // this.props.history.go(整数)
    // 返回上一页
    // this.props.history.goback()
  }
  getData() {
    this.$http({url: logout})
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })
  }
  render() {
    return (<div>
      <p>当前页面：Page A:<mark>测试Axios</mark></p>
      {/* NavLink的作用是匹配当前路由，匹配成功后，给a标签加上一个class，值由activeClassName确定 */}
      <NavLink to="/" activeClassName="acti">Page A</NavLink><br />
      {/* Link组件最终被渲染成a标签，to属性必须要有，to的值可以你是字符串或者变量 */}
      <Link to={this.url}>Page B</Link><br />
      <Link to="/pagec">Page C</Link><br />
      {/* 编程式，在函数中跳转，功能更强大 */}
      <button onClick={()=> this.jump(this.url)}>Page B</button>
      <button onClick={()=> this.getData()}>发请求</button>
    </div>)
  }
}